<template>
	<view class="header">
		<view class="status_bar" :style="{width:'100%',height: status_bar_height+'px'}">

		</view>
		<view class="title" :style="{height:navigation_bar_height+'px'}">
			智慧社区
		</view>
		<Search></Search>
		<Menu></Menu>

	</view>
</template>

<script>
	import Menu from './menu.vue'
	import Search from './search.vue';
	export default {
		//去掉微信小程序 生成多一层标签
		options: {
			virtualHost: true
		},
		data() {
			return {
				status_bar_height: 0,
				navigation_bar_height: 44
			}
		},
		created() {
			//获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.status_bar_height = systemInfo.statusBarHeight;
			
			//获取微信小程序导航栏高度
			// #ifdef MP-WEIXIN
			const custom = wx.getMenuButtonBoundingClientRect(); //胶囊按钮信息
			//导航高度=胶囊按钮高度+ （距离顶部距离-状态栏高度）*2；
			this.navigation_bar_height = custom.height + (custom.top - systemInfo.statusBarHeight) * 2
			// #endif


		},
		components: {
			Menu,
			Search
		}
	}
</script>

<style lang="less">
	.header {
		width: 100%;
		height: 428rpx;
		background: url('/static/images/headbg.png') #f6f6f6 no-repeat;
		background-size: 100% auto;
		padding: 0px 32rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			align-items: center;
			color: #fff;

		}

	}
</style>